import { GetEcharts } from '@/utils/echarts'
import * as echarts from 'echarts';
import {getyongdianapi,getmonthxiaonaapi} from '@/api/ElectricalDistribution/SX-hrss'
export const getDeviceEch = (that,dom,number,text,color) => {
  let option = {
    backgroundcolor:'red',
    title: [
      {
        text: number+'%',
        x: 'center',
        y: '35%',
        textStyle: {
          fontSize: 23,
          color: color,
          fontWeight: 'bold',
        },
      },
      {
        text: text,
        x: 'center',
        y: '52%',
        borderColor: '#fff',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 14,
          color: '#fff',
        },
      },
    ],
    polar: {
      center: ['50%', '50%'],
      radius: ['80%', '90%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        data: [number],
        name: '',
        type: 'bar',
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: '#a1bbd2',
        },
        coordinateSystem: 'polar',
        itemStyle: {
          color:color
        },
      },
    ],
  }
  GetEcharts(that, dom, option)
}
export const gettopfiveechart = async(that, dom) => {
  const {data:{entity}} = await getyongdianapi({ subburo: '88000341' });
  const topfivelist = [];
  const topdatalist = [];
  JSON.parse(entity.epowerDevTopArray).forEach(
    (ele, index) => {
      if (index < 5) {
        topfivelist.unshift(ele.devName);
        topdatalist.unshift(ele.totalEpower);
      }
    }
  )
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(50,50,50,0.3)",
      borderColor: "#fff",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {},
    grid: {
      left: "1%",
      right: "4%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      splitLine: {
        // 网格线
        lineStyle: {
          type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
          color: "#333",
        },
        show: true, // 隐藏或显示
      },
      axisLabel: {
        color: "#fff", // 设置Y轴字体颜色为蓝色
      },
    },
    yAxis: {
      type: "category",
      axisTick: { show: false }, // 不显示y轴刻度
      data: topfivelist,
      axisLabel: {
        color: "#fff", // 设置Y轴字体颜色为蓝色
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        data: topdatalist,
        itemStyle: {
          normal: {
            color: function (params) {
              const colorList = [
                ["#2972c1", "#242834"],
                ["#24a4af", "#242834"],
                ["#15ddb9", "#242834"],
                ["#8ad95e", "#242834"],
                ["#d9c562", "#242834"],
              ];
              const index = params.dataIndex;
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 1,
                  color: colorList[index][0],
                },
                {
                  offset: 0,
                  color: colorList[index][1],
                },
              ]);
            },
          },
        },
      },
    ],
  }
  GetEcharts(that,dom,option)
}